<template>
  <Modal class="fee-info-wrap" v-model="visible" @close="handleClose">
      <div class="title">Loan Information</div>
      <div class="list">
          <div class="list-item">
              <span>Application amount</span><span>₱ {{ fees.contractAmount }}</span>
          </div>
          <div class="list-item">
              <span>Received amount</span><span>₱ {{ fees.contractAmount - feesSet(fees) }}</span>
          </div>
          <div class="list-item">
              <!-- <span class="icon_question" @click="()=>showFeeDetail = !showFeeDetail">Management fee</span><span>₱ {{ feesSet(fees) }}</span> -->
              <span class="icon_question">Management fee</span><span>₱ {{ feesSet(fees) }}</span>
          </div>
          <div class="list-item">
              <span>Loan date</span><span>{{ new Date() | formatDate('MM-dd-yyyy') }}</span>
          </div>
          <div class="list-item">
              <span>Expiry date</span><span>{{ fun_date(fees.loanPeriod / 1) | formatDate('MM-dd-yyyy') }}</span>
          </div>
          <div class="list-item">
              <span>Loan products</span><span>{{ fees.productName }}</span>
          </div>
      </div>
      <!-- <popup v-model="showFeeDetail" position="center">
          <div class="detail-fee">
              <div class="detail-fee-item">
                  <span>Interest</span> <span>{{fees.interest}}</span>
              </div>
              <div class="detail-fee-item">
                  <span>Account Manage Fee</span> <span>{{fees.accountServiceFee}}</span>
              </div>
              <div class="detail-fee-item">
                  <span>Platform Service Fee</span> <span>{{fees.platformServiceFee}}</span>
              </div>
              <div class="detail-fee-item">
                  <span>Risk Fee</span> <span>{{fees.riskServiceFee}}</span>
              </div>
              <div class="detail-fee-item">
                  <span>Credit Fee</span><span>{{fees.creditServiceFee}}</span>
              </div>
          </div>
      </popup> -->
  </Modal>
</template>
<script>
import Modal from '@/components/Modal'
export default {
  props: {
      value: false,
      fees: {
          type: Object,
          default: () => {
              return {}
          }
      },
      productName: ''
  },
  components:{
      Modal
  },
  data(){
      return {
          showFeeDetail:false,
          visible: false
      }
  },
  watch: {
      value: {
          handler (val) {
              this.visible = val
          },
          immediate: true
      }
  },
  methods: {
      handleClose () {
          this.$emit('input', false)
          this.$emit('close')
          this.visible = false
      },
      fun_date(num) {
          var date1 = new Date();
          //今天时间
          var time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
          console.log(time1);
          var date2 = new Date(date1);
          date2.setDate(date1.getDate() + num);
          //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
          var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
          return time2;
      },
      feesSet(info) {
          let amount = 0
          if (info) {
              amount = info.interest / 1 + info.accountServiceFee / 1 + info.platformServiceFee / 1 + info.riskServiceFee / 1 + info.creditServiceFee / 1
          };
          return amount

      }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>